<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Medium Zoom - A JavaScript library for zooming images like Medium</title>

    <meta name="theme-color" content="#00ab6c">
    <meta name="description" content="A JavaScript library for zooming images like Medium">

    <link href="src/reset.css" rel="stylesheet">
    <link href="src/style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Varela+Round|Work+Sans" rel="stylesheet">

    <link rel="shortcut icon" href="icons/favicon.ico">
    <link rel="manifest" href="manifest.webmanifest">
  </head>

  <body>
    <header class="header">
      <h1 class="header__title">Medium Zoom</h1>
      <p class="header__subtitle">A JavaScript library for zooming images like Medium</p>

      <div class="header__info">
        <a href="https://github.com/francoischalifour/medium-zoom" class="button">View on GitHub</a>
        <a href="https://francoischalifour.com/lab/medium-image-zoom" class="button">Read the article</a>
      </div>
    </header>

    <main>
      <article class="container">
        <figure>
          <img
            id="zoom-default"
            src="src/images/image-1.jpg"
            alt="Zoom with default options"
          >
          <figcaption>Zoom with default options</figcaption>
        </figure>

        <p class="placeholder">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Tempora praesentium cupiditate fugit voluptas, rem eligendi, voluptatem molestias pariatur atque amet,
          dicta, similique beatae optio quos! Hic necessitatibus dicta magni, tempore.
          Atque illo voluptatibus fugiat id pariatur cum quasi vel ut repellendus iure quaerat,
          doloremque sit voluptatum odio maiores provident consequuntur accusantium saepe.
        </p>

        <figure>
          <img
            id="zoom-margin"
            src="src/images/image-2.jpg"
            alt="Zoom with margin"
          >
          <figcaption>Zoom with margin</figcaption>
        </figure>

        <p class="placeholder">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Ea dolores quaerat, quis modi nostrum sequi adipisci ratione esse
          blanditiis error beatae vel non vero dolor nemo. Animi nemo quisquam ducimus!
        </p>

        <figure>
          <img
            id="zoom-background"
            src="src/images/image-3.jpg"
            alt="Zoom with background color"
          >
          <figcaption>Zoom with background color</figcaption>
        </figure>

        <p class="placeholder">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos magnam illo,
          quam iusto, autem ratione commodi deleniti vero magni fuga consectetur expedita,
          voluptatum enim quidem? Rem, minima laboriosam hic! Id.
        </p>

        <figure class="pull-right">
          <img
            id="zoom-scrollOffset"
            src="src/images/image-4.jpg"
            alt="Zoom without scroll effect"
          >
          <figcaption>Zoom without scroll offset</figcaption>
        </figure>

        <p class="placeholder">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cum nulla
          eligendi recusandae at quae odio, harum nesciunt ut temporibus vitae, laudantium minus.
          Iste officia aliquid, laborum ratione maxime beatae.
        </p>

        <p class="placeholder">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores totam fugiat
          repellendus laboriosam accusantium, possimus similique quos repellat molestias excepturi
          ad perspiciatis beatae! Qui repellat numquam incidunt, accusamus autem.
        </p>

        <p class="placeholder">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni
          reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
        </p>

        <p class="placeholder">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Accusamus cum nulla eligendi recusandae at quae odio, harum nesciunt ut
          temporibus vitae, laudantium minus. Iste officia aliquid, laborum ratione maxime beatae,
          tenetur impedit repudiandae quos.
        </p>

        <figure>
          <img
            id="zoom-trigger"
            src="src/images/image-6.jpg"
            alt="Zoom to trigger"
          >
          <figcaption>
            <figcaption>Zoom triggered with another element</figcaption>
            <button id="button-trigger" class="button">Trigger zoom</button>
          </figcaption>
        </figure>

        <p class="placeholder">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni
          reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
        </p>

        <figure>
          <img
            id="zoom-detach"
            src="src/images/image-7.jpg"
            alt="Zoom detached after being zoomed once"
          >
          <figcaption>Zoom detached after having been zoomed once</figcaption>
        </figure>

        <h2>History</h2>

        <blockquote>
          <p>Interactions with the images are logged here.</p>

          <ol id="history"></ol>
        </blockquote>

        <aside>
          <h2>Getting started</h2>

          <pre><code>npm install medium-zoom</code></pre>

          <p class="text-center">
            <a href="https://github.com/francoischalifour/medium-zoom#usage" class="button button--action">Learn how to use the library →</a>
          </p>
        </aside>

      </article>
    </main>

    <footer class="footer">
      <div class="footer__links">
        <a href="https://github.com/francoischalifour/medium-zoom" class="button">View on GitHub</a>
        <a href="http://francoischalifour.com/lab/medium-image-zoom" class="button">Read the article</a>
      </div>

      <div class="footer__copyright">
        Made by <a href="https://francoischalifour.com">François Chalifour</a>
      </div>

      <p><a href="#">Back to top</a></p>
    </footer>

    <script src="src/placeholders.js" defer></script>
    <script src="src/index.js" defer></script>
  </body>
</html>
